﻿@page "/textarea"

<RadzenExample Name="TextArea">
<div class="row">
    <div class="col-xl-6">
        <h3>TextArea</h3>
        <RadzenTextArea Change=@(args => OnChange(args, "TextArea")) />
        <h3 style="margin-top: 2rem">TextArea with placeholder</h3>
        <RadzenTextArea Placeholder="Enter here..." Change=@(args => OnChange(args, "TextArea with placeholder")) />
        <h3 style="margin-top: 2rem">TextArea with 5 maximum characters</h3>
        <RadzenTextArea MaxLength="5" Change=@(args => OnChange(args, "TextArea with 5 maximum characters")) />
        <h3 style="margin-top: 2rem">TextArea with 3 rows and 30 columns</h3>
        <RadzenTextArea @bind-Value=@value Cols="30" Rows="3" Change=@(args => OnChange(args, "TextArea with 3 rows and 30 columns")) />
        <h3 style="margin-top: 2rem">Disabled TextArea with 3 rows and 30 columns</h3>
        <RadzenTextArea Disabled="true" @bind-Value=@value Cols="30" Rows="3" />
    </div>
    <div class="col-xl-6">
        <EventConsole @ref=@console />
    </div>
</div>
</RadzenExample>

@code {
    string value;

    EventConsole console;

    void OnChange(string value, string name)
    {
        console.Log($"{name} value changed to {value}");
    }
}